<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  <title>banner</title>
</head>
<style>
*{
  padding:0;
  margin:0;
}
  .box{
    width:1000px;
    margin:0 auto;
    height:500px;
    position:relative;
  }
  .box ul.banner li{
  width:1000px;
  height:500px;
  position:absolute;
  list-style:none;
  }
  .dot{
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left:-35px;
    z-index:9999;
  }
  .dot li{
    width:10px;
    height:10px;
    border-radius:50%;
    background:white;
    list-style:none;
    display:inline-block;
  }
  .dot li.active{
    background:purple;
  }
  a.prev{
    position:absolute;
    bottom:-100px;
    left:50px;
  }
  a.next{
    position:absolute;
    bottom:-100px;
    right:50px;
  }
</style>
<body>
  <div class="box">
    <ul class="banner">
      <li style="z-index:9998"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="dot">
      <li class="active"></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <a href="javascript:void(0);" class="prev">下一张</a>
    <a href="javascript:void(0);" class="next">上一张</a>
  </div>
</body>
<script>
  $(function(){
    var index1=["1","2","3","4","5","6","7"];
    var index2=["red","blue","yellow","green","pink","black","gray"]
    $(".box ul").find("li").each(function(n){
    $(this).html(index1[n]);
    $(this).css({background:index2[n]});
  });
var n=0;
var timer=null;
var len=$(".banner").find("li").length;
function change(index){
  $(".banner").find("li").eq(index).show().siblings().hide();
  $(".dot").find("li").eq(index).addClass("active").siblings().removeClass("active");
}
function next(){
  n++;
  n=n%len;
  change(n);
}
function prev(){
  n--;
  n=(n+len)%len;
  change(n);
}
$(".next").click(function(){
  next();
});
$(".prev").click(function(){
  prev();
})
$(".box").mouseenter(function(){
  clearInterval(timer);
}).mouseleave(function(){
  timer=setInterval(next,1000)
})
$(".dot").find("li").hover(function(){
  var x=$(this).index();
  change(x);
})

timer=setInterval(next,1000);
  })
</script>
</html>
